<template>
  <!--弹出层 -->
  <div class="Transfer">
    <ElForm>
      <ElRow style="display: flex; justify-content: space-around">
        <ElCol :span="10" style="border: 1px solid #ebeef5">
          <span
            style="
              display: block;
              font-size: 16px;
              text-align: center;
              padding: 10px;
              border-bottom: 1px solid #ebeef5;
              margin-bottom: 10px;
            "
            >{{ NotSelectedTitle }}</span
          >
          <Search
            :schema="allSchemas.searchSchema"
            @search="setSearchParams"
            @reset="setSearchParams"
          />
          <Table
            v-model:pageSize="pageSize"
            v-model:currentPage="currentPage"
            :columns="allSchemas.tableColumns"
            :data="dataList"
            row-key="uuid"
            :loading="loading"
            :pagination="{
              total: total,
              pageSize: pageSize
            }"
            @selection-change="checkAll"
            @register="tableRegister"
          />
        </ElCol>
        <ElCol :span="2" style="display: flex; flex-direction: column; justify-content: center">
          <BaseButton
            :disabled="nowSelectData.length ? false : true"
            type="primary"
            @click="handelSelect"
          >
            <Icon icon="ep:arrow-right"
          /></BaseButton>
          <BaseButton
            :disabled="SecurCheckStore.nowSelectRightData.length ? false : true"
            type="primary"
            style="margin-top: 10px; margin-left: 0px"
            @click="handleRemoveSelect"
          >
            <Icon icon="ep:arrow-left"
          /></BaseButton>
        </ElCol>
        <ElCol :span="10" style="border: 1px solid #ebeef5">
          <Selected
            ref="SelectedUserRef"
            :getListChild="getList"
            :schema="allSchemas"
            :taskId="props.taskId"
          />
        </ElCol>
      </ElRow>
    </ElForm>
  </div>
</template>
<script setup lang="tsx">
import { PropType, ref, unref } from 'vue'
import { ElForm, ElRow, ElCol, ElMessage } from 'element-plus'
import { Search } from '@/components/Search'
import { useTable } from '@/hooks/web/useTable'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { Icon } from '@/components/Icon'
import Selected from './Selected.vue'
import { Table } from '@/components/Table'
import SetSecurCheckApi from '@/api/securcheck/SetSecurCheck'
import { useDictStore } from '@/store/modules/dictData'
import { useSecurCheckStore } from '@/store/modules/securcheck'
import { UserLedgerListType } from '@/api/securcheck/type'
import { UniteCrudSchemas, UserCrudSchemas } from './index'
const DictStore = useDictStore()
const SelectedUserRef = ref()
const SecurCheckStore = useSecurCheckStore()
//获取字典
DictStore.setDict('secur_user_state') //用户状态

const props = defineProps({
  taskId: {
    type: Number as PropType<number>,
    default: () => null
  }
})
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const i = await SetSecurCheckApi.GetGroupSelectNotList({
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      taskId: props.taskId,
      groupUserCom: SecurCheckStore.groupUserCom
    })
    return {
      list: i.rows,
      total: i.total
    }
  },
  fetchDelApi: async () => {
    return true
  }
})

const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList } = tableMethods
const searchParams = ref({})
const crudSchemas = ref<CrudSchema[] | undefined>()
const NotSelectedTitle = ref('')
if (SecurCheckStore.groupUserCom == 0) {
  crudSchemas.value = UserCrudSchemas
  NotSelectedTitle.value = '可见待选中用户清单'
} else {
  crudSchemas.value = UniteCrudSchemas
  NotSelectedTitle.value = '可见待选中单位清单'
}
const { allSchemas } = useCrudSchemas(crudSchemas.value)
const setSearchParams = (params: any) => {
  searchParams.value = params
  getList()
}
const selectArr = ref<any>([]) // 右边列表
SecurCheckStore.nowSelectRightData.length = 0 // 右边选中列表数据默认为空
const nowSelectData = ref<UserLedgerListType[]>([]) // 左边选中列表数据
function checkAll(val: UserLedgerListType[]) {
  nowSelectData.value = val
}
// function checkRightAll(val) {
//   nowSelectRightData.value = val;
// }
function handleRemoveTabList(isNeedArr, originalArr) {
  if (isNeedArr.length && originalArr.length) {
    for (let i = 0; i < isNeedArr.length; i++) {
      for (let k = 0; k < originalArr.length; k++) {
        if (isNeedArr[i]['uuid'] === originalArr[k]['uuid']) {
          originalArr.splice(k, 1)
        }
      }
    }
  }
}
async function handelSelect() {
  selectArr.value = handleConcatArr(selectArr.value, nowSelectData.value)
  const res = nowSelectData.value.map((item) => {
    return item.uuid
  })
  const i = await SetSecurCheckApi.PutMoveTask({
    taskId: props.taskId,
    type: 0,
    uuid: res
  })
  if (i && SelectedUserRef.value) {
    ElMessage.success('选中成功')
    SelectedUserRef.value.getList()
  }
  console.log(selectArr.value, nowSelectData.value, res)
  handleRemoveTabList(nowSelectData.value, dataList.value)
  nowSelectData.value = []
}
// 取消
function handleRemoveSelect() {
  if (SelectedUserRef.value) {
    // 假设子组件有一个名为childMethod的方法
    SelectedUserRef.value.handleRemoveSelect()
  }
}
function handleConcatArr(selectArr, nowSelectData) {
  let arr = []
  arr = arr.concat(selectArr, nowSelectData)
  return arr
}
const submit = () => {
  return selectArr
}
defineExpose({
  submit
})
</script>
<style scoped>
:deep(.el-pagination > .is-last) {
  display: none !important;
}
:deep(.el-table--default .el-table__cell) {
  padding: 4px 0 !important;
}
.Transfer :deep(.el-form-item__label) {
  display: none !important;
}
</style>
